{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {
    "deletable": true,
    "editable": true
   },
   "source": [
    "# JavaScriptからDOMを用いてHTMLを操作\n",
    "\n",
    "## 基本となるコード\n",
    "\n",
    "```\n",
    "================================================\n",
    "<!DOCTYPE html>\n",
    "<html lang=\"ja\">\n",
    "<head>\n",
    "    <meta charset=\"UTF-8\">\n",
    "    <link rel=\"shortcut icon\" type=\"image/x-icon\" href=\"favicon.ico\">\n",
    "    <title>DOMとは「WEBページとプログラミング言語を繋ぐ役割を持つ」</title>\n",
    "    <style>\n",
    "        #section-1 {\n",
    "            background-color: #C8E6C9;\n",
    "        }\n",
    "        #section-2 {\n",
    "            background-color: #FFF9C4;\n",
    "        }\n",
    "    </style>\n",
    "</head>\n",
    "<body>\n",
    "<section id=\"section-1\">\n",
    "    <h2>セクション1</h2>\n",
    "    <p>子ノード1</p>\n",
    "    <p>子ノード2</p>\n",
    "    <p>子ノード3</p>\n",
    "</section>\n",
    "<section id=\"section-2\">\n",
    "    <h2>セクション2</h2>\n",
    "    <p>子ノード1</p>\n",
    "    <p>子ノード2</p>\n",
    "    <p>子ノード3</p>\n",
    "</section>\n",
    "</body>\n",
    "<script>\n",
    "    // ここにJavaScriptコードを書いていく\n",
    "    // ...\n",
    "</script>\n",
    "</html>\n",
    "================================================\n",
    "```\n",
    "\n",
    "<img src=\"img/basic_01.png\" alt=\"basic_01\" title=\"basic_01\" width=\"150\" height=\"200\" align=\"left\" />  \n",
    "\n",
    "<br clear=\"left\">"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 20,
   "metadata": {
    "collapsed": false,
    "deletable": true,
    "editable": true
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "created 10.136.3.175:/var/share/jquery.html\n"
     ]
    }
   ],
   "source": [
    "%%bash\n",
    "### 必要な設定の読み込み\n",
    "source ${HOME}/secrets\n",
    "name=javascript.html\n",
    "\n",
    "### ソースの編集\n",
    "cat <<- 'EOS' > ${name}\n",
    "\n",
    "<!DOCTYPE html>\n",
    "<html lang=\"ja\">\n",
    "<head>\n",
    "    <meta charset=\"UTF-8\">\n",
    "    <link rel=\"shortcut icon\" type=\"image/x-icon\" href=\"favicon.ico\">\n",
    "    <title>DOMとは「WEBページとプログラミング言語を繋ぐ役割を持つ」</title>\n",
    "    <style>\n",
    "        #section-1 {\n",
    "            background-color: #C8E6C9;\n",
    "        }\n",
    "        #section-2 {\n",
    "            background-color: #FFF9C4;\n",
    "        }\n",
    "    </style>\n",
    "</head>\n",
    "<body>\n",
    "<section id=\"section-1\">\n",
    "    <h2>セクション1</h2>\n",
    "    <p>子ノード1</p>\n",
    "    <p>子ノード2</p>\n",
    "    <p>子ノード3</p>\n",
    "</section>\n",
    "<section id=\"section-2\">\n",
    "    <h2>セクション2</h2>\n",
    "    <p>子ノード1</p>\n",
    "    <p>子ノード2</p>\n",
    "    <p>子ノード3</p>\n",
    "</section>\n",
    "</body>\n",
    "<script>\n",
    "    // ここにJavaScriptコードを書いていく\n",
    "    // ...\n",
    "</script>\n",
    "</html>\n",
    "EOS\n",
    "\n",
    "### ソースの転送\n",
    "sshpass -p \"${pass}\" scp ${name} ${user}@${host}:${path}\n",
    "echo \"created ${host}:${path}/${name}\""
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "deletable": true,
    "editable": true
   },
   "source": [
    "## ID名からノードを取得して操作する\n",
    "\n",
    "* ID名\n",
    "    * タグにつける一意の名前のこと\n",
    "    * ここでは「section-1」と「section-2」\n",
    "* ID名を指定するメソッド\n",
    "    * `document.getElementById(id);`\n",
    "    * section-2を取得して文字色を赤に変える\n",
    "        * `document.getElementById('section-2').style.color = 'red';`\n",
    "        \n",
    "<img src=\"img/basic_02.png\" alt=\"basic_02\" title=\"basic_02\" width=\"150\" height=\"200\" align=\"left\" />  \n",
    "\n",
    "<br clear=\"left\">"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 22,
   "metadata": {
    "collapsed": false,
    "deletable": true,
    "editable": true
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "created 10.136.3.175:/var/share/jquery.html\n"
     ]
    }
   ],
   "source": [
    "%%bash\n",
    "### 必要な設定の読み込み\n",
    "source ${HOME}/secrets\n",
    "name=javascript.html\n",
    "\n",
    "### ソースの編集\n",
    "cat <<- 'EOS' > ${name}\n",
    "\n",
    "<!DOCTYPE html>\n",
    "<html lang=\"ja\">\n",
    "<head>\n",
    "    <meta charset=\"UTF-8\">\n",
    "    <link rel=\"shortcut icon\" type=\"image/x-icon\" href=\"favicon.ico\">\n",
    "    <title>DOMとは「WEBページとプログラミング言語を繋ぐ役割を持つ」</title>\n",
    "    <style>\n",
    "        #section-1 {\n",
    "            background-color: #C8E6C9;\n",
    "        }\n",
    "        #section-2 {\n",
    "            background-color: #FFF9C4;\n",
    "        }\n",
    "    </style>\n",
    "</head>\n",
    "<body>\n",
    "<section id=\"section-1\">\n",
    "    <h2>セクション1</h2>\n",
    "    <p>子ノード1</p>\n",
    "    <p>子ノード2</p>\n",
    "    <p>子ノード3</p>\n",
    "</section>\n",
    "<section id=\"section-2\">\n",
    "    <h2>セクション2</h2>\n",
    "    <p>子ノード1</p>\n",
    "    <p>子ノード2</p>\n",
    "    <p>子ノード3</p>\n",
    "</section>\n",
    "</body>\n",
    "<script>\n",
    "    document.getElementById('section-2').style.color = 'red';\n",
    "</script>\n",
    "</html>\n",
    "EOS\n",
    "\n",
    "### ソースの転送\n",
    "sshpass -p \"${pass}\" scp ${name} ${user}@${host}:${path}\n",
    "echo \"created ${host}:${path}/${name}\""
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "deletable": true,
    "editable": true
   },
   "source": [
    "## 子ノードを取得して文字列を変更する\n",
    "\n",
    "* 子ノードを指定するメソッド\n",
    "    * `var nodeList = elementNodeReference.childNodes;`\n",
    "    * elementNodeReferenceは基準ノード\n",
    "    * nodeListは基準ノードについている子ノード全て\n",
    "    \n",
    "<img src=\"img/basic_03.png\" alt=\"basic_03\" title=\"basic_03\" width=\"150\" height=\"200\" align=\"left\" />  \n",
    "\n",
    "<br clear=\"left\">"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 28,
   "metadata": {
    "collapsed": false,
    "deletable": true,
    "editable": true
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "created 10.136.3.175:/var/share/jquery.html\n"
     ]
    }
   ],
   "source": [
    "%%bash\n",
    "### 必要な設定の読み込み\n",
    "source ${HOME}/secrets\n",
    "name=javascript.html\n",
    "\n",
    "### ソースの編集\n",
    "cat <<- 'EOS' > ${name}\n",
    "\n",
    "<!DOCTYPE html>\n",
    "<html lang=\"ja\">\n",
    "<head>\n",
    "    <meta charset=\"UTF-8\">\n",
    "    <link rel=\"shortcut icon\" type=\"image/x-icon\" href=\"favicon.ico\">\n",
    "    <title>DOMとは「WEBページとプログラミング言語を繋ぐ役割を持つ」</title>\n",
    "    <style>\n",
    "        #section-1 {\n",
    "            background-color: #C8E6C9;\n",
    "        }\n",
    "        #section-2 {\n",
    "            background-color: #FFF9C4;\n",
    "        }\n",
    "    </style>\n",
    "</head>\n",
    "<body>\n",
    "<section id=\"section-1\">\n",
    "    <h2>セクション1</h2>\n",
    "    <p>子ノード1</p>\n",
    "    <p>子ノード2</p>\n",
    "    <p>子ノード3</p>\n",
    "</section>\n",
    "<section id=\"section-2\">\n",
    "    <h2>セクション2</h2>\n",
    "    <p>子ノード1</p>\n",
    "    <p>子ノード2</p>\n",
    "    <p>子ノード3</p>\n",
    "</section>\n",
    "</body>\n",
    "<script>\n",
    "    var baseElement = document.getElementById('section-2');\n",
    "    var section2node2 = baseElement.childNodes[5];\n",
    "    section2node2.innerHTML = '子ノード2は変更されました';\n",
    "</script>\n",
    "</html>\n",
    "EOS\n",
    "\n",
    "### ソースの転送\n",
    "sshpass -p \"${pass}\" scp ${name} ${user}@${host}:${path}\n",
    "echo \"created ${host}:${path}/${name}\""
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "deletable": true,
    "editable": true
   },
   "source": [
    "* childNodes[5]\n",
    "    * childNodesの実装はノードとノードの間に「空白ノード」を差し込む\n",
    "        * childNodes[1] : セクション2\n",
    "        * childNodes[3] : 子ノード1\n",
    "        * childNodes[5] : 子ノード2"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "deletable": true,
    "editable": true
   },
   "source": [
    "## 親ノードを取得して操作する\n",
    "\n",
    "* 親ノードを指定するメソッド\n",
    "    * `var parentNode = elementNodeReference.parentNode`\n",
    "        * elementNodeReference : 基準ノード\n",
    "        * parentNode : 基準ノードの親ノード\n",
    "    * 基準ノードの親ノードを取得して子をすべて消す\n",
    "    \n",
    "<img src=\"img/basic_04.png\" alt=\"basic_04\" title=\"basic_04\" width=\"150\" height=\"200\" align=\"left\" />"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 27,
   "metadata": {
    "collapsed": false,
    "deletable": true,
    "editable": true
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "created 10.136.3.175:/var/share/jquery.html\n"
     ]
    }
   ],
   "source": [
    "%%bash\n",
    "### 必要な設定の読み込み\n",
    "source ${HOME}/secrets\n",
    "name=javascript.html\n",
    "\n",
    "### ソースの編集\n",
    "cat <<- 'EOS' > ${name}\n",
    "\n",
    "<!DOCTYPE html>\n",
    "<html lang=\"ja\">\n",
    "<head>\n",
    "    <meta charset=\"UTF-8\">\n",
    "    <link rel=\"shortcut icon\" type=\"image/x-icon\" href=\"favicon.ico\">\n",
    "    <title>DOMとは「WEBページとプログラミング言語を繋ぐ役割を持つ」</title>\n",
    "    <style>\n",
    "        #section-1 {\n",
    "            background-color: #C8E6C9;\n",
    "        }\n",
    "        #section-2 {\n",
    "            background-color: #FFF9C4;\n",
    "        }\n",
    "    </style>\n",
    "</head>\n",
    "<body>\n",
    "<section id=\"section-1\">\n",
    "    <h2>セクション1</h2>\n",
    "    <p>子ノード1</p>\n",
    "    <p>子ノード2</p>\n",
    "    <p>子ノード3</p>\n",
    "</section>\n",
    "<section id=\"section-2\">\n",
    "    <h2>セクション2</h2>\n",
    "    <p>子ノード1</p>\n",
    "    <p>子ノード2</p>\n",
    "    <p>子ノード3</p>\n",
    "</section>\n",
    "</body>\n",
    "<script>\n",
    "    var baseElement = document.getElementById('section-2');\n",
    "    var parentNode = baseElement.parentNode;\n",
    "    parentNode.removeChild(baseElement);\n",
    "</script>\n",
    "</html>\n",
    "EOS\n",
    "\n",
    "### ソースの転送\n",
    "sshpass -p \"${pass}\" scp ${name} ${user}@${host}:${path}\n",
    "echo \"created ${host}:${path}/${name}\""
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.6.1"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}
